<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>任务管理</title>
    <!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> -->
    <link rel="stylesheet" href="assets/layui/css/layui.css">
    <link rel="stylesheet" href="css/config_form.css">
    <link rel="stylesheet" href="css/table.css">
    <style>

    </style>    
</head>
<body>
    <div class="container">
        <div class="header">
            <h1><i class="fas fa-tasks"></i> 任务管理</h1>
            <p>管理您的自动化任务，创建、编辑和生成任务配置文件</p>
        </div>
        
        <div class="toolbar">
            <button class="custom-btn btn-generate" id="generateConfig">
                <i class="fas fa-file-code"></i> 生成配置文件
            </button>
            <button class="custom-btn btn-generate" id="importConfig">
                <i class="fas fa-file-code"></i> 导入配置文件
            </button>
        </div>

        <div class="table-container">   
            <div class="table-header">
                <h2><i class="fas fa-table"></i> 主机列表</h2>
                <div class="table-actions">
                    <div class="search-box">
                        <i class="fas fa-search"></i>
                        <input type="text" id="hostSearchInput" placeholder="搜索主机...">
                    </div>
                </div>
            </div>

            <!-- LayUI表格容器 -->
            <table class="layui-hide" id="hostTable" lay-filter="hostTable"></table>
        </div>
        
        <div class="table-container">
            <div class="table-header">
                <h2><i class="fas fa-table"></i> 任务列表</h2>
                <div class="table-actions">
                    <div class="search-box">
                        <i class="fas fa-search"></i>
                        <input type="text" id="searchInput" placeholder="搜索任务...">
                    </div>
                </div>
            </div>

            <!-- LayUI表格容器 -->
            <table class="layui-hide" id="taskTable" lay-filter="taskTable"></table>
        </div>
    </div>

    <!-- 主机工具栏模板 -->
    <script type="text/html" id="hostToolbarDemo">
        <div class="layui-btn-container">
            <button class="layui-btn layui-btn-sm" lay-event="add">
                <i class="layui-icon layui-icon-add-1"></i> 添加
            </button>
            <button class="layui-btn layui-btn-sm layui-btn-danger" lay-event="batchDelete">
                <i class="layui-icon layui-icon-delete"></i> 批量删除
            </button>
        </div>
    </script>
    
    <!-- 任务工具栏模板 -->
    <script type="text/html" id="taskToolbarDemo">
        <div class="layui-btn-container">
            <button class="layui-btn layui-btn-sm" lay-event="add">
                <i class="layui-icon layui-icon-add-1"></i> 添加
            </button>
            <button class="layui-btn layui-btn-sm layui-btn-danger" lay-event="batchDelete">
                <i class="layui-icon layui-icon-delete"></i> 批量删除
            </button>
        </div>
    </script>

     <!-- 主机操作列模板 -->
    <script type="text/html" id="hostBarDemo">
        <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
        <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="detail">详情</a>
        <a class="layui-btn layui-btn-warm layui-btn-xs" lay-event="test">测试连接</a>
    </script>
    <!-- 任务操作列模板 -->
    <script type="text/html" id="taskBarDemo">
        <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
        <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="detail">详情</a>
    </script>

    <!-- 主机连接状态模板 -->
    <script type="text/html" id="hostStatusTpl">
        {{# if(d.status === '在线'){ }}
            <span class="layui-badge layui-bg-green">在线</span>
        {{# } else if(d.status === '离线'){ }}
            <span class="layui-badge layui-bg-red">离线</span>
        {{# } else { }}
            <span class="layui-badge">未知</span>
        {{# } }}
    </script>

    <!-- 任务状态列模板 -->
    <script type="text/html" id="taskStatusTpl">
        {{# if(d.status === '运行中'){ }}
            <span class="layui-badge layui-bg-green">运行中</span>
        {{# } else { }}
            <span class="layui-badge">未运行</span>
        {{# } }}
    </script>

    <!-- 主机列表模板 -->
    <script type="text/html" id="hostsTpl">
        {{# if(d.hosts && d.hosts.length > 0){ }}
            {{ d.hosts.join(', ') }}
        {{# } else { }}
            -
        {{# } }}
    </script>


    <!-- 密码显示模板 -->
    <script type="text/html" id="passwordTpl">
        {{# if(d.password){ }}
            <span style="font-family: monospace;">******</span>
            <a class="layui-btn layui-btn-xs layui-btn-primary" lay-event="showPassword" style="margin-left: 5px;">显示</a>
        {{# } else { }}
            -
        {{# } }}
    </script>

    

     <!-- 主机表单悬浮层 -->
    <div id="hostFormModal" style="display:none;">
        <div class="header">
            <h1>主机配置</h1>
        </div>

        <div class="task-config-form">
            <div class="layui-form" id="host_config" lay-filter="host-form">
                <!-- 主机基本信息 -->
                <div class="card">
                    <div class="card-header">
                        <i class="layui-icon layui-icon-engine"></i> 基础配置
                    </div>
                    <div class="card-body">
                        <div class="layui-form-item">
                            <label class="layui-form-label">主机名
                                <span class="badge badge-required">必填</span>
                            </label>
                            <div class="layui-input-block">
                                <input type="text" name="hostname" placeholder="请输入主机名" class="layui-input" lay-verify="required">
                            </div>
                        </div>
                        
                        <div class="layui-form-item">
                            <label class="layui-form-label">IP地址
                                <span class="badge badge-required">必填</span>
                            </label>
                            <div class="layui-input-block">
                                <input type="text" name="ip" placeholder="请输入IP地址" class="layui-input" lay-verify="required">
                            </div>
                        </div>
                        
                        <div class="layui-form-item">
                            <label class="layui-form-label">端口</label>
                            <div class="layui-input-block">
                                <input type="number" name="port" placeholder="SSH端口，默认22" class="layui-input" value="22">
                                <div class="info-text">默认: 22</div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 认证信息 -->
                <div class="card">
                    <div class="card-header">
                        <i class="layui-icon layui-icon-password"></i> 认证信息
                    </div>
                    <div class="card-body">
                        <div class="layui-form-item">
                            <label class="layui-form-label">用户名
                                <span class="badge badge-required">必填</span>
                            </label>
                            <div class="layui-input-block">
                                <input type="text" name="username" placeholder="请输入用户名" class="layui-input" lay-verify="required">
                            </div>
                        </div>
                        
                        <div class="layui-form-item">
                            <label class="layui-form-label">认证方式</label>
                            <div class="layui-input-block">
                                <select name="auth_type" id="auth-type" lay-filter="authTypeSelect">
                                    <option value="password">密码认证</option>
                                    <option value="key">密钥认证</option>
                                    <option value="both">密码+密钥</option>
                                </select>
                            </div>
                        </div>
                        
                        <div class="layui-form-item" id="password-field">
                            <label class="layui-form-label">密码</label>
                            <div class="layui-input-block">
                                <input type="password" name="password" placeholder="请输入密码" class="layui-input">
                            </div>
                        </div>
                        
                        <div class="layui-form-item" id="key-field" style="display: none;">
                            <label class="layui-form-label">私钥路径</label>
                            <div class="layui-input-block">
                                <input type="text" name="private_key" placeholder="请输入私钥文件路径" class="layui-input">
                                <div class="info-text">例如: ~/.ssh/id_rsa</div>
                            </div>
                        </div>
                        
                        <div class="layui-form-item" id="passphrase-field" style="display: none;">
                            <label class="layui-form-label">密钥密码</label>
                            <div class="layui-input-block">
                                <input type="password" name="passphrase" placeholder="私钥密码(可选)" class="layui-input">
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 高级配置 -->
                <div class="card">
                    <div class="card-header">
                        <i class="layui-icon layui-icon-set"></i> 高级配置
                    </div>
                    <div class="card-body">
                        <div class="layui-form-item">
                            <label class="layui-form-label">连接超时</label>
                            <div class="layui-input-block">
                                <input type="number" name="timeout" placeholder="连接超时时间(秒)" class="layui-input" value="10">
                                <div class="info-text">默认: 10秒</div>
                            </div>
                        </div>
                        
                        <div class="layui-form-item">
                            <label class="layui-form-label">描述</label>
                            <div class="layui-input-block">
                                <textarea name="description" placeholder="主机描述信息" class="layui-textarea"></textarea>
                            </div>
                        </div>
                        
                        <div class="layui-form-item">
                            <label class="layui-form-label">标签</label>
                            <div class="layui-input-block">
                                <input type="text" name="tags" placeholder="多个标签用逗号分隔" class="layui-input">
                                <div class="info-text">例如: web,production,nginx</div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 表单操作按钮 -->
                <div class="actions">
                    <button type="button" class="layui-btn layui-btn-lg layui-btn-normal" id="host-submit-btn" style="width: 220px;">
                        <i class="layui-icon layui-icon-release"></i> 保存主机
                    </button>
                    <button type="button" class="layui-btn layui-btn-lg layui-btn-primary" id="host-reset-btn" style="width: 220px; margin-left: 20px;">
                        <i class="layui-icon layui-icon-refresh"></i> 重置表单
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- 任务表单悬浮层 -->
    <div id="taskFormModal" style="display:none;">
        <div class="header">
            <h1>任务配置</h1>
        </div>

        <div id="task-config-form" class="task-config-form">
            <div class="layui-form" id="task_config" lay-filter="task-form">
                <!-- 任务基本信息 -->
                <div class="card">
                    <div class="card-header">
                        <i class="layui-icon layui-icon-form"></i> 基础配置
                    </div>
                    <div class="card-body">
                        <div class="layui-form-item">
                            <label class="layui-form-label">任务名称
                                <span class="help-icon" data-tooltip="任务的唯一标识符，用于区分不同任务。建议使用有意义的英文名称，如 monitor_real_time_logs。">i</span>
                                <span class="badge badge-required">必填</span>
                            </label>
                            <div class="layui-input-block" id="name-input">
                                <input type="text" name="name" placeholder="请输入任务名称" class="layui-input" value="monitor_real_time_logs">
                            </div>
                        </div>
                        
                        <div class="layui-form-item">
                            <label class="layui-form-label">执行命令
                                <span class="help-icon" data-tooltip="任务的唯一标识符，用于区分不同任务。建议使用有意义的英文名称，如 monitor_real_time_logs。">i</span>
                                <span class="badge badge-required">必填</span>
                            </label>
                            <div class="layui-input-block" id="command-input">
                                <textarea name="command" placeholder="请输入执行命令" class="layui-textarea">timeout 60 tail -f /var/log/syslog</textarea>
                            </div>
                        </div>


                        <div class="layui-form-item">
                            <label class="layui-form-label">命令类型</label>
                            <div class="layui-input-block">
                                <select name="command_type" id="command-type" lay-filter="commandTypeSelect">
                                    <!-- <option value="auto">auto (自动检测)</option> -->
                                    <option value="normal">normal (普通)</option>
                                    <option value="streaming" selected>streaming (流式)</option>
                                    <option value="long_running">long_running (长时间运行)</option>
                                </select>
                            </div>
                        </div>
                        
                        <div class="layui-form-item">
                            <label class="layui-form-label">执行模式</label>
                            <div class="layui-input-block">
                                <select name="mode">
                                    <option value="serial">serial (串行)</option>
                                    <option value="parallel" selected>parallel (并行)</option>
                                </select>
                                <div class="info-text">默认: serial</div>
                            </div>
                        </div>
                        
      

                        <div class="layui-form-item">
                            <label class="layui-form-label">超时时间</label>
                            <div class="layui-input-block">
                                <input type="number" name="timeout" placeholder="请输入超时时间(秒)" class="layui-input" value="30">
                                <div class="info-text">默认: 30秒</div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 主机与目标配置 -->
                <div class="card">
                    <div class="card-header">
                        <i class="layui-icon layui-icon-engine"></i> 主机列表
                    </div>
                    <div class="card-body">
                        <div class="layui-form-item">
                            <div class="layui-input-block">
                                <div id="hosts-container">
                                    <div class="array-item">
                                        <input type="text" name="hosts[]" placeholder="请输入主机名称" class="layui-input" value="web-server-01">
                                        <button type="button" class="layui-btn layui-btn-danger remove-item"><i class="layui-icon layui-icon-delete"></i> 删除</button>
                                    </div>
                                    <div class="array-item">
                                        <input type="text" name="hosts[]" placeholder="请输入主机名称" class="layui-input" value="api-server-01">
                                        <button type="button" class="layui-btn layui-btn-danger remove-item"><i class="layui-icon layui-icon-delete"></i> 删除</button>
                                    </div>
                                </div>
                                <button type="button" class="layui-btn layui-btn-primary" id="add-host" style="margin-top: 10px;">
                                    <i class="layui-icon layui-icon-add-1"></i> 添加主机
                                </button>
                                <div class="info-text">默认为所有主机</div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 输出验证配置 -->
                <div class="card">
                    <div class="card-header">
                        <i class="layui-icon layui-icon-circle"></i> 输出验证
                    </div>
                    <div class="card-body">
                        <div class="layui-form-item">
                            <div id="expected-container">
                             
                                <div class="expected-block">
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">匹配模式</label>
                                        <div class="layui-input-block">
                                            <input type="text" name="expected_pattern[]" class="layui-input">
                                        </div>
                                    </div>
                                    <div class="layui-form-item">
                                        <div class="layui-inline">
                                            <label class="layui-form-label">是否使用正则表达式</label>
                                            <div class="layui-inline">
                                                <input type="checkbox" name="expected_use_regex[]" class="layui-input" lay-skin="switch" lay-text="是|否" >
                                            </div>
                                        </div>
                                        <div class="layui-inline">
                                            <label class="layui-form-label" >匹配次数</label>
                                            <div class="layui-inline">
                                                <input type="number" name="expected_match_times[]" class="layui-input" value="1">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="layui-form-item">
                                        <div class="layui-input-block">
                                            <button type="button" class="layui-btn layui-btn-danger remove-item"><i class="layui-icon layui-icon-delete"></i> 删除</button>
                                        </div>
                                    </div>
                                </div>
                                
                            </div>
                            <button type="button" class="layui-btn layui-btn-primary" id="add-expected" style="margin-top: 10px;">
                                <i class="layui-icon layui-icon-add-1"></i> 添加期望输出
                            </button>
                        </div>
                        
                        <div class="layui-form-item">
                            <div id="unexpected-container">
                                <div class="unexpected-block">
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">匹配模式</label>
                                        <div class="layui-input-block">
                                            <input type="text" name="unexpected_pattern[]" class="layui-input">
                                        </div>
                                    </div>
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">是否使用正则表达式</label>
                                        <div class="layui-input-block">
                                            <input type="checkbox" name="unexpected_use_regex[]" class="layui-input">
                                        </div>
                                    </div>
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">匹配次数</label>
                                        <div class="layui-input-block">
                                            <input type="number" name="unexpected_match_times[]" class="layui-input" value="0">
                                        </div>
                                    </div>
                                    <div class="layui-form-item">
                                        <div class="layui-input-block">
                                            <button type="button" class="layui-btn layui-btn-danger remove-item"><i class="layui-icon layui-icon-delete"></i> 删除</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <button type="button" class="layui-btn layui-btn-primary" id="add-unexpected" style="margin-top: 10px;">
                                <i class="layui-icon layui-icon-add-1"></i> 添加不期望输出
                            </button>
                        </div>
                    </div>
                </div>
                
                <!-- 任务依赖配置 -->
                <div class="card">
                    <div class="card-header">
                        <i class="layui-icon layui-icon-link"></i> 依赖关系
                    </div>
                    <div class="card-body">
                        <div class="layui-form-item">
                            <label class="layui-form-label">依赖任务</label>
                            <div class="layui-input-block">
                                <div id="depends-container">
                                    <div class="array-item">
                                        <input type="text" name="depends_on[]" placeholder="请输入依赖任务名称" class="layui-input" value="restart_nginx_service">
                                        <button type="button" class="layui-btn layui-btn-danger remove-item"><i class="layui-icon layui-icon-delete"></i> 删除</button>
                                    </div>
                                </div>
                                <button type="button" class="layui-btn layui-btn-primary" id="add-depends" style="margin-top: 10px;">
                                    <i class="layui-icon layui-icon-add-1"></i> 添加依赖任务
                                </button>
                            </div>
                        </div>
                        
                        <div class="layui-form-item">
                            <label class="layui-form-label">允许失败</label>
                            <div class="layui-input-block">
                                <input type="checkbox" name="allow_failure" lay-skin="switch" lay-text="是|否" checked>
                                <div class="info-text">允许任务失败而不中断流程</div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 交互配置 -->
                <div class="card">
                    <div class="card-header">
                        <i class="layui-icon layui-icon-service"></i> 交互响应
                    </div>
                    <div class="card-body">
                        <div class="layui-form-item">
                            <div id="interactive-container">
                                <div class="interactive-block">
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">提示词</label>
                                        <div class="layui-input-block">
                                            <input type="text" name="interactive_prompt[]" placeholder="例如: Password:" class="layui-input" value="Password:">
                                        </div>
                                    </div>
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">响应内容</label>
                                        <div class="layui-input-block">
                                            <input type="text" name="interactive_response[]" placeholder="例如: root" class="layui-input" value="root">
                                        </div>
                                    </div>
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">响应次数</label>
                                        <div class="layui-input-block">
                                            <input type="number" name="interactive_times[]" placeholder="例如: 1" class="layui-input" value="1">
                                        </div>
                                    </div>
                                    <div class="layui-form-item">
                                        <div class="layui-input-block">
                                            <button type="button" class="layui-btn layui-btn-danger remove-interactive"><i class="layui-icon layui-icon-delete"></i> 删除此响应</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <button type="button" class="layui-btn layui-btn-primary" id="add-interactive" style="margin-top: 10px;">
                                <i class="layui-icon layui-icon-add-1"></i> 添加交互响应
                            </button>
                        </div>
                    </div>
                </div>
                
                <!-- 流式配置 -->
                <div class="card" id="streaming-config">
                    <div class="card-header">
                        <i class="layui-icon layui-icon-chart-screen"></i> 流式处理配置 
                    </div>
                    <div class="card-body">
                        <div class="layui-form-item">
                            <div class="layui-inline">
                                <label class="layui-form-label">最大执行时间</label>
                                <div class="layui-input-inline">
                                    <input type="number" name="max_duration" placeholder="秒" class="layui-input" value="120">
                                </div>
                                <div class="layui-form-mid">秒</div>
                            </div>
                            
                            <div class="layui-inline">
                                <label class="layui-form-label">无输出超时</label>
                                <div class="layui-input-inline">
                                    <input type="number" name="line_timeout" placeholder="秒" class="layui-input" value="10">
                                </div>
                                <div class="layui-form-mid">秒</div>
                            </div>

                            <div class="layui-inline">
                                <label class="layui-form-label">进程kill后超时</label>
                                <div class="layui-input-inline">
                                    <input type="number" name="kill_timeout" placeholder="秒" class="layui-input" value="1">
                                </div>
                                <div class="layui-form-mid">秒</div>
                            </div>
                        </div>
                        
                        <div class="layui-form-item">
                            <div class="layui-inline">
                                <label class="layui-form-label">显示实时输出</label>
                                <div class="layui-input-inline">
                                    <input type="checkbox" name="show_realtime" lay-skin="switch" lay-text="是|否" checked>
                                </div>
                            </div>
                            
                            <div class="layui-inline">
                                <label class="layui-form-label">记录到文件</label>
                                <div class="layui-input-inline">
                                    <input type="checkbox" name="write_to_file" lay-skin="switch" lay-text="是|否" checked>
                                </div>
                            </div>
                        </div>
                        
                        <div class="layui-form-item">
                            <label class="layui-form-label">继承Shell</label>
                            <div class="layui-input-block">
                                <input type="text" name="shell_inherit_task" placeholder="输入来源的Task名" class="layui-input">
                                <div class="info-text">继承其他任务创建的Shell环境</div>
                            </div>
                        </div>
                        
                        <div class="layui-form-item">
                            <label class="layui-form-label">Shell销毁</label>
                            <div class="layui-input-block">
                                <input type="checkbox" name="shell_destroy" lay-skin="switch" lay-text="是|否">
                                <div class="info-text">任务结束后销毁Shell，后续任务无法继承</div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 表单操作按钮 -->
                <div class="actions">
                    <button type="button" class="layui-btn layui-btn-lg layui-btn-normal" id="submit-btn" style="width: 220px;">
                        <i class="layui-icon layui-icon-release"></i> 提交
                    </button>
                    <button type="button" class="layui-btn layui-btn-lg layui-btn-primary" id="reset-btn" style="width: 220px; margin-left: 20px;">
                        <i class="layui-icon layui-icon-refresh"></i> 重置
                    </button>
                </div>
            </div>
        </div>

    </div>
    
    
    <!-- <script src="https://cdn.jsdelivr.net/npm/layui@2.8.3/dist/layui.min.js"></script> -->
    <script src="assets/layui/layui.js"></script>
    <script src="js/config_form.js"></script>
    <script src="js/hosts_table.js"></script>
    <script src="js/tasks_table.js"></script>
    <!-- <script src="https://cdn.jsdelivr.net/npm/js-yaml@4.1.0/dist/js-yaml.min.js"></script> -->
    <script src="assets/js-yaml.min.js"></script>

    
    <script>
       
       layui.use(['layer', 'form'], function(){ 
            var layer = layui.layer;
            var form = layui.form;
   
            $ = layui.$;
               // 生成配置文件功能
            $('#generateConfig').on('click', function() {
                var config = {
                    hosts: hostData,
                    tasks: taskData
                };
                
                // var configJson = JSON.stringify(config, null, 2);
                var yamlConfig = "";
                yamlConfig += "hosts:\n";
                // 只生成被选中的主机
                hostData.forEach(host => {
                    if(host._selected){
                        yamlConfig += generateHostYaml(host);
                    }
                });
                yamlConfig += "tasks:\n";
                taskData.forEach(task => {
                    if(task._selected){
                        yamlConfig += generateTaskYaml(task);
                    }
                });

                layer.open({
                    type: 1,
                    title: '配置文件预览',
                    content: `<div style="padding: 20px;"><pre style="max-height: 500px; overflow-y: auto;">${(yamlConfig)}</pre></div>`,
                    area: ['800px', '600px'],
                    btn: ['下载配置文件', '关闭'],
                    yes: function(index) {
                        // 下载配置文件
                        var blob = new Blob([yamlConfig], {type: 'text/yaml'});
                        var url = URL.createObjectURL(blob);
                        var a = document.createElement('a');
                        a.href = url;
                        a.download = 'task_config.yaml';
                        a.click();
                        URL.revokeObjectURL(url);
                        layer.close(index);
                    }
                });
            });


               // YAML导入相关函数
            $('#importConfig').on('click', function() {
                // 创建隐藏的文件输入框
                var fileInput = $('<input type="file" accept=".yml,.yaml" style="display: none;">');
                $('body').append(fileInput);
                
                // 绑定文件选择事件
                fileInput.on('change', function(e) {
                    var file = e.target.files[0];
                    if (!file) {
                        fileInput.remove();
                        return;
                    }
                    
                    // 检查文件类型
                    var fileName = file.name.toLowerCase();
                    if (!fileName.endsWith('.yml') && !fileName.endsWith('.yaml')) {
                        layer.msg('请选择YAML文件（.yml或.yaml）', {icon: 2});
                        fileInput.remove();
                        return;
                    }
                    
                    // 显示加载提示
                    var loadingIndex = layer.load(1, {
                        shade: [0.1, '#000'],
                        content: '正在读取文件...'
                    });
                    
                    // 读取文件内容
                    var reader = new FileReader();
                    
                    reader.onload = function(event) {
                        try {
                            var yamlContent = event.target.result;
                            // console.log('原始YAML内容：');
                            // console.log(yamlContent);
                            
                            // 解析YAML内容
                            parseYamlContent(yamlContent, loadingIndex);
                            
                        } catch (error) {
                            layer.close(loadingIndex);
                            layer.msg('文件读取失败：' + error.message, {icon: 2});
                            console.error('文件读取错误：', error);
                        }
                        
                        // 清理文件输入框
                        fileInput.remove();
                    };
                    
                    reader.onerror = function() {
                        layer.close(loadingIndex);
                        layer.msg('文件读取失败', {icon: 2});
                        console.error('FileReader错误');
                        fileInput.remove();
                    };
                    
                    // 开始读取文件
                    reader.readAsText(file, 'UTF-8');
                });
                
                // 触发文件选择
                fileInput.click();
            });

             
            
            // 解析YAML内容
            function parseYamlContent(yamlContent, loadingIndex) {
                try {
                    // 检查是否已加载js-yaml库
                    if (typeof jsyaml === 'undefined') {
                        layer.close(loadingIndex);
                        layer.msg('YAML解析库未加载，请确保引入了js-yaml库', {icon: 2});
                    }
                    
                    // 解析YAML
                    var parsedData = jsyaml.load(yamlContent);
                    
                    layer.close(loadingIndex);
                    
                    console.log('=== YAML解析结果 ===');
                    console.log('解析的数据类型：', typeof parsedData);
                    console.log('解析的数据：', parsedData);

                    hostData = parsedData.hosts;
                    taskData = parsedData.tasks;

                    hostTableIns.reload({
                        data: hostData
                    });
                    taskTableIns.reload({
                        data: taskData
                    });
                    
                    // 验证和处理数据
                    // if (validateAndProcessData(parsedData)) {
                    //     layer.msg('YAML文件导入成功！请查看控制台输出', {icon: 1, time: 3000});
                    // }
                    
                } catch (error) {
                    layer.close(loadingIndex);
                    layer.msg('YAML解析失败：' + error.message, {icon: 2});
                    console.error('YAML解析错误：', error);
                    console.log('错误的YAML内容：', yamlContent);
                }
            }

        });




    </script>
</body>
</html>